<template>
      <navtabbar>
        <div slot="left">
          <div class="left" @click="esc"></div>
        </div>
      <div slot="center" class="navtabbar">
        <span v-for="(item,index) in titles" :key='index' @click="f1(index)" :class="{red:n1==index}">{{item}}</span>
      </div>
    </navtabbar>
</template>

<script>
import navtabbar from'../../../components/common/navber/navbar.vue'
export default {
  data(){
    return{
      titles:['商品','参数','评论','推荐'],
      n1:0
    }
  },
  components:{
  navtabbar
  },
  methods:{
    esc(){
      history.back()
    },
    f1(index){
      this.n1=index
      console.log('index'+index);
      this.$emit('tiaozhuan',index)
    }
  },
  props:{
    pro:{
      type:Number
    }
  },
  watch:{
    pro(newvalue){
      this.n1 = newvalue
    }
  }
}
</script>

<style scoped>
.navtabbar{
  display: flex;
}
.navtabbar span{
  flex: 1;
  padding: 0;
}
.left{
  margin-top: 12px;
  margin-left: 20px;
  width: 0;
  height: 0;
  border-right:20px solid  rgb(206, 187, 187);
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}
.red{
  color: rgb(175, 23, 23);
}
</style>